<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lee-gantt demo</title>
    <link href="css/lee-gantt.css" rel="stylesheet" />
</head>

<body>

    <div id="gantt-box" style="border:1px solid #ddd;height: 400px;"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/lee-gantt.js"></script>
<script>
    $(function () {
        $("#gantt-box").gantt({
            title: 'xxx项目任务甘特图',
            leftWidth: 250,
            onItemClick:function(data){
                console.info('你点击了任务信息：',data);
            },
            onItemTitleClick:function(data){
                console.info('你点击了任务标题信息：',data);
            },
            onColumnClick:function(data){
                console.info('你点击了格子：',data);
            },
            onLoadFinish:function(){
                console.info('插件加载完成！');
            },
            data: [{
                id: '1',
                title: '超级任务',
                desc: '任务备注啊',
                values: [
                    {
                        startDate: '2023-01-03',
                        endDate: '2023-01-12',
                        progress: 90,
                        label: '任务第一计划',
                        skin: 'danger'
                    }, {
                        startDate: '2023-02-11',
                        endDate: '2023-02-12',
                        progress: 90,
                        label: '任务第一计划2',
                        skin: 'warning'

                    }
                ]
            }, {
                id: '2',
                title: '超级任务二',
                desc: '1111',
                values: [
                    {
                        startDate: '2023-01-12',
                        endDate: '2023-01-23',
                        progress: 80,
                        label: '计划二',
                        skin: 'success'
                    }
                ]
            }, {
                id: '3',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四'
                    }
                ]
            }, {
                id: '4',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四'
                    }
                ]
            }, {
                id: '5',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四'
                    }
                ]
            }, {
                id: '6',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四'
                    }
                ]
            }, {
                id: '7',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四',
                        skin: 'success'

                    }
                ]
            }, {
                id: '8',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四',
                        skin: 'danger'

                    }
                ]
            }, {
                id: '9',
                title: '超级任务3',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四'
                    }
                ]
            }, {
                id: '10',
                title: '超级任务311111',
                desc: '',
                values: [
                    {
                        startDate: '2023-03-12',
                        endDate: '2023-04-23',
                        progress: 80,
                        label: '计划四'
                    }
                ]
            }]
        });
    });
</script>

</html>